<script lang="ts" setup>

const { t, locale } = useI18n();

interface Props {
  address: string
  contract_name: string
  currency_id: CurrencyCode,
  currency_name: string
}
defineOptions({
  name: 'AppAddressListItem',
})
const emits = defineEmits(['delete', 'edit'])
const props = defineProps<Props>()

</script>

<template>
  <div class="flex flex-col gap-[.875rem] border-b border-bg-black-5 py-[1rem]">
    <div class="flex justify-between items-center">
        <div class="flex gap-[.5rem]">
            <AppCurrencyIcon class="size-[1.25rem]" :currency-type="getCurrencyConfigByCode(props.currency_id)?.['name']"/>
            <span class="text-text-white-0 leading-[1.3rem]">{{ props.currency_name }}</span>
        </div>
        <BaseDropdown>
          <template v-slot:menu>
            <div @click="emits('edit')" class="text-center py-[.375rem] w-[5rem]">{{t('edit')}}</div>
            <div @click="emits('delete')" class="text-center py-[.375rem] w-[5rem]">{{t('delete')}}</div>
          </template>
        </BaseDropdown>
    </div>
    <div class="flex gap-[.5rem] justify-between">
        <div class="text-text-white-3">{{ t('common_currency') }}</div>
        <div class="text-text-white-0">{{ props.currency_name }}</div>
    </div>

    <div class="flex gap-[.5rem] justify-between">
        <div class="text-text-white-3">{{ t('common_address') }}</div>
        <div class="text-text-white-0">{{ props.address }}</div>
    </div>
    <div class="flex gap-[.5rem] justify-between">
        <div class="text-text-white-3">{{ t('common_chain_network') }}</div>
        <div class="text-text-white-0">{{ props.contract_name }}</div>
    </div>
  </div>
</template>